<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>Hourly分析</title>

    <style>
        .mar-r20 {
            margin-right: 20px;
        }

        .mar-l10 {
            margin-left: 10px;
        }

        .search {
            background-color: #1890ff;
            color: white;
        }
    </style>


    <script type="text/javascript" src="../resources/js/contants.js"></script>
    <link href="../resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="../resources/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.min.css" rel="stylesheet">
    <link href="../resources/css/dateRange.css" rel="stylesheet">
    <link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
    <link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
    <link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/echarts.common.min.js"></script>
    <!-- <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script> -->


    <title>用户访问行为分析</title>
</head>

<body class="gray-bg" onload="load()">
    <div style="align-items: center; margin-bottom: 100px;">
        <h1>用户访问session分析</h1>
        <span class="mar-l10">选择任务</span>
        <select class="mar-r20" id='task'>

        </select>
        <span class="mar-l10">选择数据源</span>
        <select class="mar-r20" id='source'>

        </select>
        <input id="to_search" class="search" type="button" value="查询" onclick="to_search()" />
    </div>
    <div id="" style="margin-bottom: 200px;">

    </div>
    <div class="row" style="margin-left: 100px;">
        <div id="container" class="col-sm-12">
            <div id='chart1' style="height: 500px;width:500px;display: inline-block; margin-right: 100px;"></div>
            <div id='chart2' style="height: 500px;width:500px;display: inline-block;"></div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../js/interface.js"></script>
<script type="text/javascript">


    function load() {

        // 1.获取任务列表
        $.ajax({
            url: interface.task_find_list,
            success: function (result) {
                result.forEach((i) => {
                    const name = i.task_name;
                    const id = i.task_id;
                    $('#source').append('<option value="' + id + '">' + name + '</option>');
                });
            }
        });

        // 2.获取数据源列表
        $.ajax({
            url: interface.source_find_list,
            success: function (result) {
                result.forEach((i) => {
                    const name = i.source_name;
                    const id = i.source_id;
                    $('#task').append('<option value="' + id + '">' + name + '</option>');
                });
            }
        });

        // 3.从storage中获取任务s数据
        const new_task = localStorage.getItem('task');
        if (new_task) {
            const task = JSON.parse(new_task);
            const task_id = task.task_id;
            const source = task.source_id;
            // 给下拉框赋值
            document.querySelector('#task').value = task_id;
            document.querySelector('#source').value = source_id;

            // 获取数据
            get_data(task_id, source_id);
        }


        //      	myChart1.setOption(setCharts(result));
        //                  myChart2.setOption(setCharts(result));

        //          $.ajax({
        //              url: "https://learn.gotohard.cn/article/findOne.do?id=1", success: function (result) {
        //                  console.log('-- ajax result ---', result)
        //                  var myChart1 = echarts.init(document.getElementById('chart1'));
        //                  var myChart2 = echarts.init(document.getElementById('chart2'));
        //
        //                  myChart1.setOption(setCharts(result));
        //                  myChart2.setOption(setCharts(result));
        //              }
        //          });


        // const result1 = [
        //     { value: 0.01, name: '1-3秒' },
        //     { value: 0.01, name: '4-6秒' },
        //     { value: 0.01, name: '7-9秒' },
        //     { value: 0.38, name: '10-30秒' },
        //     { value: 0.17, name: '30-60秒' },

        //     { value: 0.1, name: '1-3分钟' },
        //     { value: 0.09, name: '3-10分钟' },
        //     { value: 0.1, name: '10-30分钟' },
        //     { value: 0.1, name: '30+分钟' }
        // ];

        // const result2 = [
        //     { value: 0.1, name: '1-3页面' },
        //     { value: 0.14, name: '4-6页面' },
        //     { value: 0.2, name: '7-9页面' },
        //     { value: 0.26, name: '10-30页面' },
        //     { value: 0, name: '30-60页面' }

        // ];
        //             setCharts(result);

        var myChart1 = echarts.init(document.getElementById('chart1'));
        var myChart2 = echarts.init(document.getElementById('chart2'));

        myChart1.setOption(setCharts1(result1));
        myChart2.setOption(setCharts2(result2));
    }



    function setCharts1(data) {
        option = {
            title: {
                text: '用户session访问时长',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        return option;
    }

    function setCharts2(data) {
        option = {
            title: {
                text: '用户session访问步长',
                subtext: '模拟数据',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data
            },
            series: [
                {
                    name: '访问步长',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        return option;
    }




    function get_data(task_id, source_id) {
        $.ajax({
            url: interface.get_task_details,
            data: { task_id, source_id },
            success: function (result) {
                if (result.code = 1) {
                    // 删除本地存储
                    localStorage.removeItem('name');

                    var myChart1 = echarts.init(document.getElementById('chart1'));
                    var myChart2 = echarts.init(document.getElementById('chart2'));

                    myChart1.setOption(setCharts(result.msg));
                    myChart2.setOption(setCharts(result.msg));
                } else if (result.code = 0) {
                    setTimeout(() => {
                        get_data(task_id, source_id);
                    }, 5000);
                } else if (result.code = -1) {
                    alert('有进行中的任务，不能再次添加');
                }
            }
        });
    }
</script>



<script>
    // 查询
    function to_search() {
        const l = localStorage.getItem('name');
        if (l) {
            alert('有进行中的任务，不能再次添加');
            return;
        }

        const task_id = document.querySelector('#task').value;
        const source_id = document.querySelector('#source').value;

        localStorage.setItem('task', JSON.stringify({ task_id, source_id }));

        get_data(task_id, source_id);
    }
</script>

</html>